<template>
	<view class="container">
		<view class="image-content">
			<image mode="widthFix"
				src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/f8ac233f847ed4d4ac03d6bd53042bdc.png">
			</image>
		</view>

		<view class="phone-wrapper">
			<!--  #ifdef  MP-WEIXIN -->
			<button hover-class="none" open-type="getPhoneNumber" @getphonenumber="bindPhone" type="default"
				class="wxButton" style="background-color: #FDD338;">一键领取</button>
			<!--  #endif -->

			<!--  #ifdef  MP-TOUTIAO -->
			<button hover-class="none" type="default" class="wxButton" style="background-color: #FDD338;"
				@click="getUserProfile">一键领取</button>
			<!--  #endif -->
		</view>
		<tui-dialog :buttons="buttons" :show="show" @close="close" @click="buttonTap" >
			<template v-slot:content>
				<view class="tips-wrapper">
					<image
						src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/872620f415fd95b422aa8528b99647d6.png">
					</image>

					<!-- <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210630/083417250c0b5108ebff0fd0ac70de21.png">
					
				</image> -->
					<text>领取成功，可在优惠券里查看</text>
					<!-- <text>您已经领取过一次，无法再领取了哦～</text> -->
				</view>
			</template>
		</tui-dialog>


	</view>
</template>

<script>
	import WechatApi from '@/libs/wechat.js';
	let app = getApp();
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				buttons: [{
					text: '去下单',
					color: '#fdd338'
				}],
				show: false
			};
		},
		onLoad(options) {
			// #ifdef MP
		
			//扫码携带参数处理
			if (options.scene) {
				let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
				console.log(value, 'options')
				if (value.id) {
					this.id = value.id;
				} else {
					return this.$util.Tips({
						title: '缺少参数无法查看商品'
					}, {
						tab: 3,
						url: 1
					});
				}
				//记录推广人uid
				if (value.pid) app.globalData.spid = value.pid;
				if (value.time) this.datatime = value.time
			}
			// #endif
			
			if (options.id) {
				this.id = options.id
				this.datatime = Number(options.time)
				this.status = options.status
			}
			
			
			app.globalData.spid = options.id;
		},
		onShow() {
			WechatApi.getCode()
				.then(code => {
					this.code = code
				})
		},
		methods: {
			...mapActions('m_user', ['loginByWxNewMiniapp']),

			close(){
				this.show = false;
			},
			// 手机号登录
			bindPhone(e) {
				this.show = true;
				return;

				uni.showLoading({
					title: '正在领取中'
				});

				let self = this;
				let userInfo = {};
				userInfo.encryptedData = e.detail.encryptedData
				userInfo.iv = e.detail.iv;
				userInfo.code = self.code;
				userInfo.spreadId = app.globalData.spid; //获取推广人ID
				self.loginByWxNewMiniapp(userInfo).then(() => {
					uni.hideLoading();
					uni.showToast({
						title: '领取成功'
					});
					uni.navigateBack()
				}).catch(() => {
					uni.hideLoading();
					uni.showToast({
						title: '领取失败！'
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.image-content {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: -99999;

		image {
			width: 100%;
		}
	}

	.phone-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		background-color: #fff;
		top: 240px;
		left: 0;
		right: 0;

		button {
			bottom: 74rpx;
			background-color: transparent;
			border: 1px solid #fff;
			width: 469rpx;
			height: 98rpx;
			border-radius: 98rpx;
			line-height: 98rpx;
			color: #3d3d3d;
		}
	}


	.tips-wrapper {

		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 40rpx 60rpx;
		position: relative;
		background-color: #fff;
		padding: 0 !important;

		image {
			margin-bottom: 16rpx;
			opacity: 0.85;
			width: 136rpx;
			height: 100%;
		}

		text {
			color: rgba(61, 61, 61, 1);
			font-size: 20rpx;
		}
	}
</style>
